<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>函数的防抖和节流</title>
    <style>
      .area {
        width: 600px;
        height: 200px;
        color: #fff;
        font-size: 20px;
        text-align: center;
        line-height: 200px;
        background-color: #8f5151;
        margin: 20px auto;
      }
    </style>
  </head>
  <body>
    <!-- dom元素中 event是事件参数的实参 -->
    <div class="area" onmousemove="mouseMove(event)"></div>
    <div class="area" onmousemove="mouseDebounceMove(event)"></div>
    <div class="area" onmousemove="mouseThrottleMove(event)"></div>
    <script>
      // 定义计数器
      let mouseCount = 0;
      function mouseMove(event) {
        event.target.innerText = `常规移动:${mouseCount}次`;
        mouseCount++;
      }
      //   防抖的函数处理
      let mouseDebounceCount = 0;
      let timeId = null;
      function mouseDebounceMove(event) {
        //在500毫秒之内 只要连续触发 则重新计时
        // 第一次 timeId null  clearTimeout没用 - 定时器开启 延时五百毫秒
        // 第二次 在500毫秒之间进来
        // 只要进来的间隔 大于500毫秒
        //clearTimeout 清除的只是上一次还没有执行的定时器
        clearTimeout(timeId); // 清除定时器
        timeId = setTimeout(function () {
          event.target.innerText = `防抖移动:${mouseDebounceCount}次`;
          mouseDebounceCount++;
        }, 500);
      }
      let mouseThrottleCount = 0;
      let throttleId = null;
      function mouseThrottleMove(event) {
        console.log(throttleId);
        // 如果第一次进来
        if (!throttleId) {
          // 如果没有定时器 说明 此时还没有开启
          throttleId = setTimeout(() => {
            event.target.innerText = `节流移动:${mouseThrottleCount}次`;
            mouseThrottleCount++;
            // 逻辑执行完毕 此时认为可以让下一个人进来
            throttleId = null; // 重新打开开关
          }, 500);
        }
      }
    </script>
  </body>
</html>
